<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .active {
            color: #f66;

        }
    </style>
</head>

<body>
    <div id='app'>
        <p>
            <button :class="{active: com == 'home'}" @click="com = 'home'">首页</button>
            <button :class="{active: com == 'kind'}" @click="com = 'kind'">分类</button>
            <button :class="{active: com == 'cart'}" @click="com = 'cart'">购物车</button>
            <button :class="{active: com == 'user'}" @click="com = 'user'">我的</button>
        </p>
        <hr>

        <!-- <home></home> -->
        <!-- keep-alive 非活跃的组件将会被缓存！ -->
        <!-- 
            include 包含，只有包含的组件才会被缓存，其余组件都不会被缓存
            include 对应的值是组件中定义的 name 属性的值
         -->
        <!-- <keep-alive :include="['home','kind']">
            <component :is="com"></component>
        </keep-alive> -->

        <!-- 
            exclude 排除，写在排除数组中的组件将不会被缓存
            max 配置最大缓存组件的数量
         -->
        <!-- component 配置 is 属性做动态组件的切换 -->
        <keep-alive :max="10" :exclude="['home','kind']">
            <component :is="com"></component>
        </keep-alive>





    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                com: 'home'
            }
        },
        methods: {},
    })


    app.component('home', {
        template: '<h1>首页 <input /></h1>',
        // 每个组件中最好包含一个 name 属性，标记组件名称，该 name 属性在缓存的时候需要使用
        name: 'home',
        activated() {
            // 在首次挂载、
            // 以及每次从缓存中被重新插入的时候调用
        },
        deactivated() {
            // 在从 DOM 上移除、进入缓存
            // 以及组件卸载时调用
        }
    })

    app.component('kind', {
        template: '<h1>分类 <input /></h1>',
        name: 'kind'
    })

    app.component('cart', {
        template: '<h1>购物车 <input /></h1>',
        name: 'cart'
    })

    app.component('user', {
        template: '<h1>我的 <input /></h1>',
        name: 'user'
    })


    const vm = app.mount('#app')
</script>

</html>